<template>
  <!-- 处理措施1 -->
  <div v-if="thisDiv === 3">
    <table>
      <slot name="left"/>
      <tr>
        <td class="td-title">无介入</td>
        <td>
      <span v-if="formData.baqsjRecordHandle.nonInvolved === '102'">
        其他（{{ formData.baqsjRecordHandle.nonInvolvedOther || '' }}）
      </span>
          <span v-else>
        {{ getNoIntervention(formData.baqsjRecordHandle.nonInvolved) || '' }}
      </span>
        </td>
      </tr>
      <tr>
        <td class="td-title">医疗介入</td>
        <td>{{ formatMedicalInterventions(formData.medicalInvolvedArr) || '' }}</td>
      </tr>
      <tr>
        <td class="td-title">其他介入</td>
        <td>{{ formatOtherInterventions(formData.otherInvolvedArr) || '' }}</td>
      </tr>
      <slot name="right"/>
    </table>
  </div>
  <div v-else style="display: flex; width: 100%; flex-wrap: wrap; ">
    <slot name="left"/>
    <el-form-item label="无介入" prop="nonInvolved">
      <el-radio-group v-model="formData.baqsjRecordHandle.nonInvolved">
        <el-radio v-for="(item, index) in noInterventionList" :key="index" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
      <el-input
        v-if="formData.baqsjRecordHandle.nonInvolved && formData.baqsjRecordHandle.nonInvolved === '102'"
        :style="{ width: '200px' }"
        placeholder="请输入"
        v-model="formData.baqsjRecordHandle.nonInvolvedOther"
      />
    </el-form-item>
    <div style="width: 100%" />
    <el-form-item label="医疗介入" prop="medicalInvolvedArr">
      <div style="display: flex;">
        <el-checkbox-group v-model="formData.medicalInvolvedArr">
          <el-checkbox v-for="(item, index) in medicalInterventionList" :key="index" :label="item.value"> {{ item.label }} </el-checkbox>
          <el-input
            v-if="formData.medicalInvolvedArr && formData.medicalInvolvedArr.indexOf('125') > -1"
            :style="{ width: '200px', 'margin-left': '5px' }"
            placeholder="请输入"
            v-model="formData.baqsjRecordHandle.medicalInvolvedOther"
          />
        </el-checkbox-group>
      </div>
    </el-form-item>
    <div style="width: 100%" />
    <el-form-item label="其他介入" prop="otherInvolvedArr">
      <div style="display: flex;">
        <el-checkbox-group v-model="formData.otherInvolvedArr">
          <el-checkbox v-for="(item, index) in otherInterventionList" :key="index" :label="item.value"> {{ item.label }} </el-checkbox>
          <el-input
            v-if="formData.otherInvolvedArr && formData.otherInvolvedArr.indexOf('134')  > -1"
            :style="{ width: '200px', 'margin-left': '5px' }"
            placeholder="请输入"
            v-model="formData.baqsjRecordHandle.otherInvolvedOther"
          />
        </el-checkbox-group>
      </div>
    </el-form-item>
    <slot name="right"/>
  </div>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    thisDiv: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      noInterventionList: [
        { value: '100', label: '无需任何处理' },
        { value: '101', label: '病人拒绝处置' },
        { value: '102', label: '其他' }
      ],
      medicalInterventionList: [
        { value: '120', label: '持续观察' },
        { value: '121', label: '加强护理防范' },
        { value: '122', label: '监测生命体征' },
        { value: '123', label: '伤口护理' },
        { value: '124', label: '给予额外关注（如约束、注射治疗、药物治疗）' },
        { value: '125', label: '其他' }
      ],
      otherInterventionList: [
        { value: '130', label: '予以病人家属慰问和支持' },
        { value: '131', label: '移除与危害相关的设备或环境运作' },
        { value: '132', label: '通报卫生主管机构' },
        { value: '133', label: '上报警察机关' },
        { value: '134', label: '其他' }
      ]
    }
  },
  methods: {
    getNoIntervention(value) {
      const item = this.noInterventionList.find(item => item.value === value)
      return item ? item.label : value
    },
    formatMedicalInterventions(values) {
      if (!values || values.length === 0) return ''
      const labels = []
      // 按照字典顺序遍历
      this.medicalInterventionList.forEach(item => {
        if (values.includes(item.value)) {
          if (item.value === '125') {
            labels.push(`其他（${this.formData.baqsjRecordHandle.medicalInvolvedOther || ''}）`)
          } else {
            labels.push(item.label)
          }
        }
      })
      return labels.join(', ')
    },
    formatOtherInterventions(values) {
      if (!values || values.length === 0) return ''
      const labels = []
      // 按照字典顺序遍历
      this.otherInterventionList.forEach(item => {
        if (values.includes(item.value)) {
          if (item.value === '134') {
            labels.push(`其他（${this.formData.baqsjRecordHandle.otherInvolvedOther || ''}）`)
          } else {
            labels.push(item.label)
          }
        }
      })
      return labels.join(', ')
    }
  }
}
</script>
<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  table-layout: fixed;
}
td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  /* 调整行间距 */
  line-height: 1.6;
  /* 调整字体大小 */
  font-size: 18px;
  /* 调整字间距 */
  letter-spacing: 0.5px;
}

.td-title {
  width: 12%;
  background-color: #fff;
}
</style>
